<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item">
          <span style="width: 88px;">保单状态</span>
          <div class="right">
            <span v-for="(item, index) in $getJsonValue('保单状态')" :key="index" :class="params_list.status == item.val ? 'active' : ''" @click="selected(item)">{{item.label}}</span>
          </div>
        </div>
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>保险类型</span>
              <el-select class="tel-value" v-model="params_list.type" placeholder="请选择">
                <el-option label="车险" value="1"></el-option>
                <el-option label="其他" value="2"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <span>客户姓名</span>
              <el-input class="tel-value" v-model="params_list.username" placeholder="请输入客户姓名"></el-input>
            </div>
            <div class="item-inline">
              <span>客户手机号</span>
              <el-input class="tel-value" v-model="params_list.tel" placeholder="请输入客户手机号"></el-input>
            </div>
            <div class="item-inline">
              <span>承保机构</span>
              <el-input class="tel-value" v-model="params_list.jg" placeholder="请输入承保机构"></el-input>
            </div>
            <div class="item-inline">
              <span>出单账号</span>
              <el-input class="tel-value" v-model="params_list.no" placeholder="请输入出单账号"></el-input>
            </div>
            <div class="item-inline">
              <span>保单号</span>
              <el-input class="tel-value" v-model="params_list.no2" placeholder="请输入保单号"></el-input>
            </div>
            <div class="item-inline">
              <span>保险类别</span>
              <el-select class="tel-value" v-model="params_list.bqtype" placeholder="请选择">
                <el-option label="交强险" value="1"></el-option>
                <el-option label="商业险" value="2"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <span>车牌号</span>
              <el-input class="tel-value" v-model="params_list.no3" placeholder="请输入车牌号"></el-input>
            </div>
            <div class="item-inline">
              <span>订单来源</span>
              <el-select class="tel-value" v-model="params_list.ly" placeholder="请选择">
                <el-option label="手工订单" value="1"></el-option>
                <el-option label="自动续保" value="2"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          车险订单列表
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="订单时间" align="center" width="150">
          </el-table-column>
          <el-table-column prop="ly" label="订单来源" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shno" label="保单号" align="center" width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">{{scope.row.shno}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="保险类别" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="name" label="承保机构" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="no" label="出单账号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="type" label="保险类型" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="no2" label="车牌号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="address" label="所在地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="username" label="客户姓名" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="price" label="保单金额" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button v-if="scope.row.ly == '手工订单'" @click="addRow(scope.row)" type="text" size="small">新建营销订单</el-button>
              <el-button v-else @click="addRow(scope.row)" type="text" size="small">新建快速下单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
           <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增用户 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="80%">
      <div slot="title" class="header-title">
        <span class="title-name">新增用户</span>
      </div>
      <el-dialog
        width="55%"
        class="jx-dialog"
        title="选择地区"
        :visible.sync="boo.showAddress"
        append-to-body>
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-radio-group v-model="params_adres.radio" @change="getActive">
                <el-radio :label="1">不限地区</el-radio>
                <el-radio :label="2">适用地区</el-radio>
              </el-radio-group>
              <div class="active-item" v-if="boo.isAddress">
                <div class="select-type">
                  <div class="item">
                    <span>搜索地区：</span>
                    <div class="right">
                      <div class="item-inline">
                        <el-input class="tel-value" v-model="params_adres.address" placeholder="请输入地区"></el-input>
                      </div>
                      <div class="item-inline">
                        <el-button class="jx-btn" type="primary" @click="search_address">搜索</el-button>
                      </div>
                    </div>
                  </div>
                  <div class="item" style="margin-bottom: 30px;">
                    <span>快速直达：</span>
                    <div class="right">
                      <span v-for="(item, index) in typelist" :key="index" :class="params_adres.type == item.val ? 'active' : ''" @click="selected_address(item)">{{item.label}}</span>
                    </div>
                  </div>
                  <div class="item">
                    <span>省份：</span>
                    <div class="right">
                      <el-checkbox :indeterminate="params_adres.isIndeterminate" v-model="params_adres.checkAll" @change="handleCheckAllChange">安徽省</el-checkbox>
                    </div>
                  </div>
                  <div class="item">
                    <span>市：</span>
                    <div class="right">
                      <el-checkbox-group v-model="params_adres.checkedCities" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="(item,index) in params_adres.cities" :key="index" :label="item.val">{{item.label}}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btn-container">
            <el-button class="jx-btn" type="warning" @click="boo.showAddress = false">取消</el-button>
            <el-button class="jx-btn" type="primary" :loading="boo.address_save" @click="submitRow_address">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        width="55%"
        class="jx-dialog"
        title="添加产品"
        :visible.sync="boo.showProduct"
        append-to-body>
        <div class="jx-detail" style="padding: 0;">
          <div class="detail-item">
            <div class="item">
              <div class="select-type">
                <div class="item table-item" style="margin: 0;">
                  <div class="right" style="padding: 0;">
                    <div class="item-inline">
                      <span>搜索商品：</span>
                      <el-input class="tel-value" v-model="params_product.name" placeholder="请输入商品名称"></el-input>
                    </div>
                    <div class="item-inline">
                      <el-button class="jx-btn" type="primary" @click="search_product">搜索</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="jx-table">
                <el-table :data="shoplist" border style="width: 100%" v-loading="boo.loading">
                  <el-table-column type="index" label="序列" width="55" align="center">
                    <template slot-scope="scope">
                      <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="img" label="产品图片" width="130" align="center">
                    <template slot-scope="scope">
                      <img class="logo" :src="scope.row.img"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="产品名称" width="180" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="address" label="适用地区" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="shop" label="支持门店" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="price" label="采购价格" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="type" label="商品类型" align="center" >
                  </el-table-column>
                  <el-table-column label="操作" width="90" align="center">
                    <template slot-scope="scope">
                      <el-button @click="hiddenRow(scope.row)" type="text" size="small">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="shoplist.length != 0" class="jx-pagination">
                  <el-pagination @current-change="pageChange_product" @size-change="handleSizeChange_product" :current-page="params_product.page" :page-sizes="[10,50,100]" :page-size="params_product.size" layout="total, sizes, prev, pager, next, jumper"
                    :total="other.allRow_product">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
          <div class="btn-container">
            <el-button class="jx-btn" type="warning" @click="boo.showProduct = false">取消</el-button>
            <el-button class="jx-btn" type="primary" :loading="boo.product_save" @click="submitRow_pro">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item_2">
              <div class="title">基本信息</div>
              <el-form-item label="订单类型：" prop="type">
                <el-select class="tel-value" v-model="currentRow.type" placeholder="请选择">
                  <el-option label="赠送" value="1"></el-option>
                  <el-option label="其他" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间：" prop="start">
                <el-date-picker
                  v-model="currentRow.start"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间：" prop="end">
                <el-date-picker
                  v-model="currentRow.end"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </div>
          </div>
          <div class="detail-item">
            <div class="item">
              <div class="title">
                产品信息
              </div>
              <el-form-item label="适用地区：" prop="address">
                <el-button @click="viewAddress" type="text" size="small">{{currentRow.address}}</el-button>
              </el-form-item>
              <div class="jx-table">
                <div class="title">
                  <div class="add-new">
                    <el-button class="jx-btn" type="primary" @click="addProduct">添加产品</el-button>
                  </div>
                </div>
                <el-table :data="detail" border show-summary :summary-method="getSum" style="width: 100%" v-loading="boo.loading">
                  <el-table-column type="index" label="序列" width="60" align="center">
                    <template slot-scope="scope">
                      <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="item1" label="选择产品" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item2" label="设置数量" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span v-if="scope.row.item2">{{scope.row.item2 || ''}}</span>
                      <el-input v-else v-model="currentRow.item2" placeholder="请输入商业数量"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="item3" label="商品价值" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item4" label="累计价值" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                      <!-- <el-button @click="addRow(scope.row)" type="text" size="small">添加</el-button> -->
                      <el-button @click="deteleRow(scope.row,scope.$index)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">提交</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import list from 'static/json/order/auto.json'
  import shoplist from 'static/json/product/shoplist.json'
  const typelist = [
    {label: 'A',val: '1'},{label: 'B',val: '2'},{label: 'C',val: '3'},
    {label: 'D',val: '4'},{label: 'E',val: '5'},{label: 'F',val: '6'},
    {label: 'G',val: '7'},{label: 'H',val: '8'},{label: 'I',val: '9'},
    {label: 'J',val: '10'},{label: 'K',val: '11'},{label: 'L',val: '12'},
    {label: 'M',val: '13'},{label: 'N',val: '14'},{label: 'O',val: '15'},
    {label: 'P',val: '16'},{label: 'Q',val: '17'},{label: 'R',val: '18'},
    {label: 'S',val: '19'},{label: 'T',val: '20'},{label: 'U',val: '21'},
    {label: 'V',val: '22'},{label: 'W',val: '23'},{label: 'X',val: '24'},
    {label: 'Y',val: '25'},{label: 'Z',val: '26'}
  ]
  const cityOptions = [
    {label: '合肥',val: '1'},{label: '芜湖',val: '2'},{label: '安庆',val: '3'},
  ]
  const detail = [
    {item1: '赠送',item2: '1',item3: '200.00',item4: '200.00'}
  ]
	export default {
		data() {
			return {
        boo: {
          loading: false,
          showDialog: false,
          saveing: false,
          showAddress: false, // 内层选择地区弹框
          isAddress: false, // 选择地区
          address_save: false,
          showProduct: false,
          product_save: false,
          isAddproduct: false,
        },
        other: {
          allRow: 1,
          allRow_product: 1,
          item2: '0',
          item4: '0',
        },
        list: list,
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
          status: '',
          type: '',
          tel: '',
          username: '',
          jg: '',
          no: '',
          no2: '',
          bqtype: '',
          no3: '',
          ly: '',
        },
        params_adres: {
          radio: '',
          address: '',
          type: '',
          checkAll: false,
          checkedCities: [],
          cities: cityOptions,
          isIndeterminate: true
        },
        typelist: typelist, //快速直达
        detail: detail,
        shoplist: shoplist,
        params_product: {
          page: 1,
          size: 10,
          name: '',
        },
        rules: {
          type: [{ required: true, message: '请选择订单类型', trigger: 'change' }],
          start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
          end: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){},
      selected(item){
        let _self = this
        _self.params_list.status = item.val
        _self.getList()
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
      },
      viewRow(item){
        let _self = this
      },
      addRow(item){
        let _self = this
        _self.currentRow = JSON.parse(JSON.stringify(item))
        _self.boo.showDialog = true
      },
      getSum(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          switch(column.property) {
            case "item2":
              sums[index] = this.other.item2
              break;
            case "item4":
              sums[index] = this.other.item4
              break;
            default:
              break;
          }
        });
        return sums;
      },
      // 地区小弹框
      viewAddress(){
        let _self = this
        _self.boo.showAddress = true
        if(_self.currentRow.address == '不限'){
          return _self.params_adres.radio = 1
        }else {
          return _self.params_adres.radio = 2
        }
      },
      getActive(){
        let _self = this
        if(_self.params_adres.radio == 2){
          _self.boo.isAddress = true
        }else {
          _self.boo.isAddress = false
        }
      },
      search_address(){},
      selected_address(item){
        let _self = this
        _self.params_adres.type = item.val
      },
      handleCheckAllChange(val) {
        let _self = this                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
        let arr = []
        _self.params_adres.cities.forEach(item => {
          arr.push(item.val)
        })
        _self.params_adres.checkedCities = val ? arr : [];
        _self.params_adres.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let _self = this
        let checkedCount = value.length;
        _self.params_adres.checkAll = checkedCount === _self.params_adres.cities.length;
        _self.params_adres.isIndeterminate = checkedCount > 0 && checkedCount < _self.params_adres.cities.length;
      },
      hiddenRow(){},
      showAddress(){
        
      },
      // 产品小弹框
      addProduct(){
        let _self = this
        _self.boo.showProduct = true
      },
      search_product(){},
      pageChange_product(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange_product(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      submitRow_pro(){
        let _self = this
        // _self.currentRow.item1 = '赠送' 
        _self.boo.showDialog = false
      },
      deteleRow(){},
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.showDialog = false     
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 78px
  .jx-dialog
    .jx-table
      /deep/ .el-table__body td
        .cell
          height: auto
          line-height: auto
    /deep/ .el-dialog__body
      padding: 20px 20px
    .active-item
      margin: 20px auto 0
      padding: 10px
      .select-type .item
        margin-bottom: 10px
      .select-type .item .right span
        padding: 0
        margin-right: 12px
        font-size: 17px
      .select-type .item .right span.active
        color: #333
        border: 0
        background: #fff
        font-size: 18px
        font-weight: 600
      .select-type 
        .jx-btn.el-button
          height: 32px !important
          line-height: 32px !important
        .jx-btn.el-button /deep/ span
          color: #fff
          line-height: 32px
          padding: 0 5px
          margin: 0
        /deep/ .el-checkbox__inner
          width: 14px
          padding: 0
          margin-right: 0
        /deep/ .el-checkbox__input
          padding: 0
          margin-right: 0
        /deep/ .el-checkbox__label
          padding: 0
          padding-left: 10px
          margin-right: 0
</style>
